<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>

	<view class="ball_details_wrap flx " v-else>
		<view class="ball_top">
			<view class="operate">
				<view class="chat_btn" @click="toGroup" v-if="is_group!=-1">
					<uni-icons type="chat" size="24" color="#ffffff"></uni-icons>
				</view>
				<view class="edit_btn" v-if="resData.UserID==user.UserID" @click="edit">
					<uni-icons type="more-filled" size="24" color="#ffffff"></uni-icons>
				</view>
				<view>
					<!--  #ifdef MP-WEIXIN -->
					<button hover-class="none" open-type="share">
						<image src="@/static/img/icon_fx.png"></image>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<button hover-class="none" @click="app_share">
						<image src="@/static/img/icon_fx.png"></image>
					</button>
					<!-- #endif -->
				</view>
			</view>
			<view class="user_info_wrap flx flx_align_center">
				<view @click="nav_to(`/pages/user/user_visitor?id=${resData.UserID}`)"
					class="flx flx_justify_center flx_align_center">
					<view class="title">【{{ resData.GolfType }}】{{ resData.Title }}</view>
					<view class="badge"></view>
				</view>

			</view>

			<view class="ball_title_wrap">
				<view class="ball_title"></view>
				<view v-if="resData.Commission" class="ball_fee flx flx_align_center">
					运动总奖励 x {{ resData.Commission }}
					<image class="icon" src="https://golfapi.xiaojusmart.com/Data/gift/icon_hua.png" mode=""></image>
				</view>
			</view>

			<view class="ball_info_desc">
				<view class="ball_time sm_info flx">
					<view class="imgbox_sm">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171031091591097.png" mode=""></image>
					</view>
					{{
						getTime2(resData.ServerDate) + ' ' + getWeek(resData.ServerDate) + resData.ServerTime
					}}
					开始
				</view>
				<view class="ball_address sm_info">
					<view class="flx">
						<view class="imgbox_sm">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710310227266557.png" mode=""></image>
						</view>
						{{resData.ShopID>0?resData.ShopName:resData.Place}}
					</view>
					<view class="distance">距您{{ resData.Distance }}km</view>
				</view>

				<view class="ball_feerule sm_info flx flx_align_center">
					<view class="imgbox_sm">
						<image src="@/static/img/match_price.png" mode=""></image>
					</view>
					买单方式：{{ resData.FeeRule }}
				</view>

				<view class="ball_remark">{{ resData.Remark?resData.Remark: ''}}</view>

			</view>
		</view>
		<view class="people" style="padding-bottom: 0;">
			<!-- <view class="tip">球局人员</view> -->
			<view class="x-user">
				<view v-for="(l,i) in userList" v-if="l.Status>=1" :key="i" class="user-cell">
					<image :src="l.HeadImgUrl" mode="aspectFill"
						@click="nav_to(`/pages/user/user_visitor?id=${l.UserID}`)">
					</image>
					<view class="x-name u-line-1">
						{{l.Name}}
					</view>
					<block v-if="l.IsMySelf==1">
						<view class="x-sign u-line-1">
							发起人
						</view>
					</block>
					<block v-else>
						<view class="x-sign u-line-1" v-if="resData.Status==0">

						</view>
						<view class="x-nosign u-line-1" v-else-if="resData.Status>=1&&l.Status==1">
							未签到
						</view>
						<view class="x-sign u-line-1" v-else-if="l.Status==2">
							已签到
						</view>
						<view class="x-sign u-line-1" v-else-if="l.Status==3">
							已领奖励
						</view>
					</block>
				</view>
				<block v-if="resData.UserID==user.UserID&&resData.Status<=2">
					<view class="user-cell" @click="add_user">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/tab_fabu.png" mode="aspectFill">
						</image>
						<view class="x-name u-line-1">
							邀请好友
						</view>
						<view class="x-sign u-line-1">

						</view>
					</view>
					<view class="user-cell" @click="reduce_user">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/tab_fabuj.png" mode="aspectFill">
						</image>
						<view class="x-name u-line-1">
							移除成员
						</view>
						<view class="x-sign u-line-1">

						</view>
					</view>
				</block>
			</view>

		</view>

		<view class="ball_bottom flx flx_align_center" style="margin-top: -200rpx;">
			<view class="ball_info_desc">
				<view class="ball_footer flx flx_justify_between flx_align_center">

					<block v-if="resData.UserID!=user.UserID">
						<view class="people_num" @click="openFriend">
							<view class="tip">报名人数</view>
							<view class="num">{{ applyList.length }}</view>
						</view>
					</block>

					<block v-if="resData.UserID==user.UserID">
						<view class="detail_btn" @click="nav_to(`/pages/ball/ball_people_confirm?id=${resData.ID}`)">
							报名详情({{ applyList.length }}) ></view>
					</block>
					<block v-else>
						<view v-if="resData.Status==0&&!is_sign" @click="subJoin" class="join_btn">去报名</view>
						<block v-else>
							<view v-if="resData.Status==0&&is_sign" class="joined_btn running">已报名</view>
							<view v-else-if="resData.Status==1" class="joined_btn running">进行中</view>
							<view v-else-if="resData.Status==2" class="joined_btn running">已发奖励</view>
							<view v-else class="joined_btn end">已结束</view>
						</block>

					</block>
				</view>
				<block v-if="resData.Status<=2&&resData.Status>=0">
					<view class="ball_footer flx flx_justify_between flx_align_center">
						<block v-if="IsInvitor">
							<view class="reject" @click="reject_invite">拒绝</view>
							<view class="confirm" @click="agree_invite">同意</view>
						</block>
						<block v-else-if="IsSign">
							<view class="sign" @click="user_sign">开始签到</view>
						</block>
						<block v-else-if="IsSuccessed">
							<view class="pending">{{Success_Msg}}</view>

						</block>
					</view>
					<block v-if="IsSuccessed&&Success_Msg!='您已退出该球局'">
						<view @click="cancelBall()" class="quit_ball_btn">退出运动</view>
					</block>
				</block>

			</view>
		</view>

		<uni-popup ref="friends" type="center">
			<view class="x-popup">
				<view class="popup-title">报名人员</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l,i) in applyList" :key="i" class="list-cell"
							@click="nav_to(`/pages/user/user_visitor?id=${l.UserID}`)">
							<image class="list-icon" :src="l.HeadImgUrl" mode=""></image>
							<view class="list-name"> {{l.Name}} </view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="$refs['friends'].close()">关闭</view>
			</view>
		</uni-popup>

		<!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!-- #endif -->
	</view>


</template>

<script>
	export default {
		data() {
			return {
				ID: '',
				payPrice: 0,
				cover: '',
				user: {},
				load: false,
				resData: {},
				read: false,
				userIDList: [],
				userList: [],
				applyList: [],
				comfirm_list: [],
				is_sign: false,
				list: [],
				longitude: '',
				latitude: '',
				IsInvitor: false, //是否为邀请用户
				IsSign: false,
				IsSuccessed: false,
				Success_Msg: '',
				groupID: 0,
				groupList: [],

				my_ball_status: 0,

				is_group: -1,

				is_app_share_show: false
			};
		},
		onReady(){
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#ffffff',
			})
		},
		async onLoad(e) {
			this.ID = e.id;

			await this.$api.post('/Common/Add_ViewPath', {
				Path: 'ball_details',
				Platform: uni.getStorageSync('platform')
			});

			if (await this.$store.getters.getLoginState) {

				await this.init();

				uni.$on('join_confirm', () => {
					this.init();
				})
				uni.$on('people_confirm', () => {
					this.init();
				})


				this.groupID = this.ID.toString()
				await this.$im.queryGroupMemberList(this.groupID, {
					count: 100,
					nextFlag: 0
				}).then((res) => {
					// console.log(res);
					if (res) {
						this.groupList = res.userList
						this.is_group = this.groupList.findIndex((item) => item.userID  == this.user.UserID + '09')
					}
				})
			}
		},
		async onShow() {


		},
		onUnload() {
			uni.$off('join_confirm')
			uni.$off('people_confirm')
		},
		onShareAppMessage(res) { //发送给朋友
			var pid = this.user.UserID

			return {
				title: this.user.Name + "邀请您加入运动",
				path: "/pages/ball/ball_details?pid=" + pid + "&id=" + this.resData.ID,
			}
		},
		methods: {
			app_share() {
				this.$refs.share.open()
			},
			openFriend() {
				this.$refs.friends.open();
			},
			async add_user() {
				this.nav_to('/pages/ball/ball_invite_people?id=' + this.resData.ID);
			},
			async reduce_user() {
				this.nav_to('/pages/ball/ball_reduce_people?id=' + this.resData.ID);
			},
			async toGroup() {
				const name = "【" + this.resData.Title + "】群聊";
				this.nav_to(
					`/pages/chat/group_game?id=${this.groupID}&type=2&name=${name}`
				)
			},
			async agree_invite() {
				const groupID = this.ID.toString()
				let _this = this;
				// const 
				uni.showModal({
					title: '温馨提示',
					content: '确定加入吗？',
					confirmText: '确定加入',
					success: function(rs) {
						if (rs.confirm) {
							let d = _this.$api.post('Appointment/InviteComfirm', {
								AppointmentID: _this.ID,
								Status: 1
							});


							_this.$im.joinGroup(groupID).then((res) => {
								let textMsg = '我是' + _this.user.Name
								_this.$im.sendChatMessage(2, textMsg, groupID, _this.isByte).then(
									d => {
									});
							})
							_this.$pv.msg('您成功加入运动');

							_this.init();
						} else if (rs.cancel) {

						}
					}
				});


			},
			async reject_invite() {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '确定拒绝加入吗？',
					confirmText: '拒绝',
					success: function(rs) {
						if (rs.confirm) {
							let d = _this.$api.post('Appointment/InviteComfirm', {
								AppointmentID: _this.ID,
								Status: -1
							});

							_this.$pv.msg('您已拒绝加入运动');

							_this.init();

						} else if (rs.cancel) {

						}
					}
				});

			},
			async user_sign() {
				let d = await this.$api.post('Appointment/UserSign', {
					AppointmentID: this.ID,
					User_Lat: this.latitude,
					User_Lng: this.longitude
				});

				if (!d.data) {

					this.$pv.msg(d.message);
					return;
				}

				this.$pv.msg('签到成功');

				this.init();
			},
			edit() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['编辑球局', '开始球局', '发放奖励', '结束球局', '取消球局'],
					success: function(res) {
						if (res.tapIndex == 0) {
							if (_this.resData.Status > 0) {
								_this.$pv.msg('球局已开始或已结束，不能编辑');
								return;
							}

							_this.nav_to('/pages/ball/ball_edit?id=' + _this.resData.ID);
						} else if (res.tapIndex == 1) {
							//开始球局
							if(_this.resData.Status == 1){
								_this.$pv.msg('球局已经开始了');
								return 
							}
							uni.showModal({
								title: '温馨提示',
								content: '你确定要开始吗？',
								confirmText: '确定开始',
								success: function(rs) {
									if (rs.confirm) {
										let d = _this.$api.post('Appointment/StartAppointment', {
											ID: _this.resData.ID
										}).then((res)=>{
											if(res.code == 0 && res.message == 'success'){
												_this.resData.Status = 1;
											}
										});
									} else if (rs.cancel) {

									}
								}
							});
							return;
						} else if (res.tapIndex == 2) {
							//发放奖励
							if (_this.resData.Status == 0) {
								_this.$pv.msg('球局未开始，不能发放奖励');
								return;
							}
							if (_this.resData.Commission <= 0) {
								_this.$pv.msg('球局未设置奖励，不需要发放');
								return;
							}

							_this.nav_to('/pages/ball/sendreward_user?id=' + _this.ID);

						} else if (res.tapIndex == 3) {
							//结束球局
							const groupID = _this.resData.ID.toString()
							uni.showModal({
								title: '温馨提示',
								content: '确定要结束吗？',
								confirmText: '确定结束',
								success: function(rs) {
									if (rs.confirm) {
										let d = _this.$api.post('Appointment/FinishAppointment', {
											ID: _this.resData.ID
										}).then((res)=>{
											if(res.code == 0 && res.message == 'success'){
												_this.$pv.msg('球局成功结束');
												setTimeout(() => {
													uni.navigateBack()
												}, 1200)
											}
										});
										// 解散球局群聊
										// _this.$im.dismissGroup(groupID)
										
									} else if (rs.cancel) {

									}
								}
							});
						} else if (res.tapIndex == 4) {
							//取消球局

							if (_this.resData.Status > 0) {
								_this.$pv.msg('球局已开始或已结束，不能取消');
								return;
							}

							uni.showModal({
								title: '温馨提示',
								content: '确定要取消吗？',
								confirmText: '确定取消',
								success: function(rs) {
									if (rs.confirm) {
										let d = _this.$api.post('Appointment/Cancel', {
											ID: _this.resData.ID
										});
										_this.$pv.msg('取消成功');
										setTimeout(() => {
											uni.navigateBack()
										}, 1200)
									} else if (rs.cancel) {

									}
								}
							});

						}
					},
					fail: function(res) {
						;
					}
				})
			},

			async init() {
				this.user = uni.getStorageSync('user');


				let loc = await this.getLocationSysc();

				this.longitude = loc.longitude;
				this.latitude = loc.latitude;

				let res = await this.$api.post('Appointment/Detail', {
					ID: this.ID,
					User_Lng: loc.longitude,
					User_Lat: loc.latitude
				});
				this.resData = res.data;
				this.userIDList = res.data.Item.map(item => item.UserID);
				this.is_sign = res.data.Item.some(v => v.UserID == this.user.UserID);
				this.userList = res.data.Item;
				this.applyList = res.data.Item.filter(v => v.UserID != this.resData.UserID).map(v => {
					return v
				});

				this.my_ball_status = res.data.Item.filter(v => v.UserID == this.user.UserID).map(v => {
					return v.Status
				});

				console.log('my ball status' + this.my_ball_status);

				this.comfirm_list = res.data.Item.filter(v => v.Status == 1 && v.UserID != this.resData.UserID).map(
					v => {
						return v
					});

				this.payPrice = this.resData.Price;

				this.load = true;

				let d = await this.$api.post('Appointment/IsInviteUser', {
					AppointmentID: this.ID
				});

				if (d.data == 1)
					this.IsInvitor = true;
				else
					this.IsInvitor = false;

				let ud = await this.$api.post('Appointment/IsSign', {
					AppointmentID: this.ID
				});

				if (ud.data)
					this.IsSign = true;
				else
					this.IsSign = false;

				let sd = await this.$api.post('Appointment/IsSuccessed', {
					AppointmentID: this.ID
				});

				this.IsSuccessed = sd.data;
				this.Success_Msg = sd.message;

			},
			// 获取定位
			async getLocationSysc() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							const defaultLocation = {
								latitude: 0,
								longitude: 0
							};
							resolve(defaultLocation);
						}
					});
				});
			},
			async subJoin() {

				let u = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});

				this.user = u.data;
				if (this.user.IsAuth == 0) {
					let _this = this;
					uni.showModal({
						title: '温馨提示',
						content: '未注册用户请先注册账号',
						confirmText: "关闭",
						cancelText: "注册账号",
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								});
							} else if (res.cancel) {
								_this.nav_to('/pages/start/start2');
							}
						}
					});
				}

				if (this.user.IsAuth == 0)
					this.nav_to(`/pages/user/start2`);
				else
					this.nav_to(`/pages/ball/ball_join_confirm?id=${this.ID}`);


			},

			async join() {
				this.nav_to(`/pages/ball/ball_join_confirm?id=${this.ID}`);
			},
			async cancelBall() {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '您确认要退出吗',
					showCancel: true,
					success: async function(res) {
						if (res.confirm) {
							_this.$pv.load();
							let r = await _this.$api.post('Appointment/Quit', {
								AppointmentID: _this.ID
							});
							setTimeout(() => {
								_this.$pv.msg('已退出球局');

								_this.init();

							}, 500);
						}
					}
				});
				// api/Appointment/UserCancel
			},

			sharePYQ() {
				const user = uni.getStorageSync("user");

				const pid = user.UserID;
				let id = this.ID;

				const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
				const paseUrl = `pages/H5/ball_detail?id=${id}&pid=${pid}`;
				let shareUrl = BaseUrl + paseUrl;

				console.log('share url-----' + shareUrl)

				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: shareUrl,
					title: '【动魅' + this.resData.GolfType + '】' + this.resData.Title,
					summary: this.resData.Remark,
					imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
					success: (res) => {
						console.log("success:" + JSON.stringify(res));
						this.$refs.share.close()
					},
					fail(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});



			},
			shareWX() {
				const user = uni.getStorageSync("user");

				const pid = user.UserID;
				let id = this.ID;

				const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
				const paseUrl = `pages/H5/ball_detail?id=${id}&pid=${pid}`;
				let sharUrl = BaseUrl + paseUrl;
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 5,
					imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
					title: '【动魅' + this.resData.GolfType + '】' + this.resData.Title,
					miniProgram: {
						id: 'gh_ff1a33213d99',
						path: 'pages/ball/ball_details?id=' + id + '&pid=' + pid,
						type: 0,
						webUrl: sharUrl
					},
					success: (res) => {
						console.log("success:" + 'pages/ball/ball_details?id=' + id + '&pid=' + pid);
						console.log("success:" + JSON.stringify(res));
						this.$refs.share.close()
					},
					fail(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});

				// this.is_app_share_show = false;
			},
		},
		computed: {

			getTime2() {
				return l => {
					let d = new Date(l);
					let timestamp = d.getTime();
					return this.$u.date(timestamp, 'mm-dd');
				};
			},
			getWeek() {
				return l => {
					let d = new Date(l);
					// d.getDate();
					// console.log(d.getDay());
					let week = d.getDay();
					let weelStr =
						week == 0 ?
						'星期天' :
						week == 1 ?
						'星期一' :
						week == 2 ?
						'星期二' :
						week == 3 ?
						'星期三' :
						week == 4 ?
						'星期四' :
						week == 5 ?
						'星期五' :
						'星期六';
					return weelStr;
				};
			}
		}
	};
</script>

<style lang="scss">
	view,
	text {
		color: white;
	}

	page {
		height: 100%;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.bottom_share_btn {
		background-color: #fff;
		position: fixed;
		height: 120rpx;
		// line-height: 120rpx;
		bottom: 10rpx;

		display: flex;
		flex-wrap: row nowrap;
		justify-content: space-between;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}

	.detail_btn {
		color: #dcc188;
		padding: 16rpx 20rpx;
		border-radius: 6rpx;
		font-size: 36rpx;
		position: absolute;
		right: 45rpx;
		width: 230rpx;
		text-align: right;
	}

	.ball_details_wrap {
		background: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf-bg.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position-x: center;
		background-position-y: center;
		position: relative;

		&::before {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.6);
		}

		height: 100%;
		align-content: space-between;
		flex-direction: column;

		>view {
			flex: 1;
			padding: 45rpx 52rpx 88rpx 52rpx;
			// padding: 0 52rpx;
			position: relative;
		}

		.ball_top {
			width: 100%;
			box-sizing: border-box;
			.operate {
				line-height: 50rpx;
				height: 50rpx;
				display: inline-block;
				align-items: right;
				position: relative;
				width: 100%;

				.chat_btn {
					color: #dcc188;
					border-radius: 6rpx;
					font-size: 36rpx;
					position: absolute;
					width: 60rpx;
					right: 240rpx;
				}

				.edit_btn {
					color: #dcc188;
					border-radius: 6rpx;
					font-size: 36rpx;
					position: absolute;
					width: 60rpx;
					right: 160rpx;
				}


				button {
					display: flex;
					background-color: unset;
					//height:50rpx !important;
					//margin-top: -30rpx;
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					// right: 100rpx;
					right: 0;
				}

			}
		}


		.user_info_wrap {
			margin: 20rpx 0 24rpx 0;
			flex: 1;

			.avatar {
				width: 126rpx;
				height: 126rpx;
				margin: 0 22rpx 0 0;
				border-radius: 50%;
				border: 1rpx solid rgb(81, 81, 87);

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.title {
				font-size: 42rpx;
				width: 100%;
			}

			.user_name {
				font-size: 32rpx;
				overflow: hidden; //超出一行文字自动隐藏 
				text-overflow: ellipsis; //文字隐藏后添加省略号
				white-space: nowrap; //强制不换行
			}

			.join_btn {
				color: #dcc188;
				padding: 16rpx 20rpx;
				border: 1px solid #cda151;
				border-radius: 6rpx;
				font-size: 36rpx;
				position: absolute;
				right: 45rpx;

			}





		}

		.ball_title_wrap {
			.ball_title {
				font-size: 46rpx;
			}

			.ball_fee {
				color: #cda151;
				font-size: 42rpx;
				margin-top: 22rpx;

				.icon {
					margin-left: 9rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.imgbox_sm {
			margin-right: 14rpx;
			display: inline-block;
			vertical-align: middle;
			font-size: 0;
			margin-left: 6rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.ball_info_desc {
			width: 100%;

			.sm_info {
				margin: 14rpx 60rpx 14rpx 14rpx;
			}

			.quit_ball_btn {
				color: #ffff00;
				align-items: center;
				width: 100%;
				text-align: center;
			}

			.ball_remark {
				margin-top: 28rpx;
				padding-left: 24rpx;
				width: 90%;
				// overflow: hidden;
			}
			.ball_address{
				.distance{
					margin-left: 58rpx;
					color: #ccc;
				}
			}
		}

		.ball_bottom {
			padding: 0 52rpx;
			>view {
				margin: 20rpx 0;
			}

			.imgbox_sm {
				margin-right: 14rpx;
				display: inline-block;
				vertical-align: middle;
				font-size: 0;
				margin-left: 6rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.ball_remark {
				margin-top: 14rpx;
				padding-left: 10rpx;
			}

			.ball_footer {
				margin-top: 68rpx;
				margin-bottom: 20rpx;

				.join_btn {
					color: #dcc188;
					padding: 16rpx 20rpx;
					border: 1px solid #cda151;
					border-radius: 6rpx;
					font-size: 36rpx;

					&.end {
						color: #dedede;
						border: 2rpx solid #dedede;
					}

					&.running {
						color: #ff557f;
						border: 2rpx solid #dedede;
					}
				}

				.joined_btn {
					color: #dcc188;
					padding: 16rpx 20rpx;
					border-radius: 6rpx;
					font-size: 36rpx;

					&.end {
						color: #dedede;
						//border: 2rpx solid #dedede;
					}

					&.running {
						color: #ff557f;
						//border: 2rpx solid #dedede;
					}
				}

				.people_num {
					>view {
						color: #cda151;
					}

					.tip {
						font-size: 28rpx;
					}

					.num {
						font-size: 48rpx;
						position: relative;
						display: inline-block;

						&::after {
							content: '人';
							position: absolute;
							margin-left: 8rpx;
							font-size: 20rpx;
							color: #cda151;
							bottom: 8rpx;
							right: -22rpx;
						}
					}
				}

				.reject {
					padding: 22rpx 110rpx;
					border-radius: 48rpx;
					border: 2rpx solid #fef0bc;
					margin: 12rpx;
				}

				.confirm {
					background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
					border-radius: 48rpx;
					padding: 22rpx 110rpx;
					margin: 12rpx;
					color: #4c310c;
				}

				.sign {
					background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
					border-radius: 48rpx;
					padding: 22rpx 110rpx;
					margin: 12rpx;
					color: #4c310c;
					width: 100% !important;
					text-align: center;
				}

				.pending {
					padding: 22rpx 110rpx;
					border-radius: 48rpx;
					border: 2rpx solid #fef0bc;
					margin: 12rpx;
					width: 100% !important;
					text-align: center;
				}

			}
		}
	}


	.mt20 {
		margin-top: 20rpx;
	}

	.pl8 {
		padding-left: 8rpx;
	}

	.pl10 {
		padding-left: 10rpx;
	}

	.btn_grey {
		background: #aaa;
		color: #ccc;
	}

	.x-user {

		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10rpx;


		.user-cell {
			width: 120rpx;
			display: flex;
			align-items: center;
			//justify-content: center;
			flex-direction: column;
			padding: 0 20rpx 20rpx 20rpx;
			position: relative;


		}


		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.x-name {
			font-size: 28rpx;
			margin-top: 5rpx;
		}

		.x-sign {
			font-size: 28rpx;
			color: #ffaa00;
			margin-top: 5rpx;
		}

		.x-nosign {
			font-size: 28rpx;
			color: #b9b9b9;
			margin-top: 5rpx;
		}
	}

	.x-share {
		background-color: #ffffff;
		width: 750rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		box-sizing: border-box;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}

	.x-popup {
		background-color: #ffffff;
		width: 650rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #333;

			.xiaoju-popup-close {
				font-size: 40rpx;
				position: absolute;
				right: 50rpx;
				top: 25rpx;
				color: #333;
			}
		}

		.popup-wrap {
			max-height: 800rpx;
			min-height: 300rpx;
			padding-top: 10rpx;
			padding-bottom: 30rpx;

			.popup-cell {
				padding: 8rpx 40rpx;
				font-size: 30rpx;
				line-height: 44rpx;
			}
		}

		.popup-tip {
			margin: 0 auto;
			width: 100%;
			height: 55rpx;
			color: #4C310C;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 20rpx;
		}

		.popup-btn {
			margin: 0 auto;
			width: 120rpx;
			height: 55rpx;
			border-radius: 10rpx;
			color: #4C310C;
			font-size: 32rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #B98B51
		}
	}


	.x-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 40rpx;

		.list-cell {
			width: 22%;
			height: 120rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 10rpx 0rpx 10rpx;
			border-radius: 16rpx;
			position: relative;

			&.list-active {
				border-radius: 16rpx;
				border: 2rpx solid #70737C;
			}

			.list-btn {
				width: calc(100% + 4rpx);
				height: 52rpx;
				color: #fff;
				background: #FD4C61;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: absolute;
				bottom: -2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			.list-icon {
				width: 80rpx !important;
				height: 80rpx !important;
			}

			.list-name {
				color: #333;
				font-size: 24rpx;
				margin-top: 8rpx;
			}

			.list-price {
				color: #333;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
		}
	}
</style>